<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>22</title>
</head>

<body class="page12">
    <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
    <div id="status">Started</div>
    <div id="drag" class="draggable" style="position:absolute; background:red">draggable</div>
    <div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
        Click anywhere else to get the default context menu.</div>
    <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
                silver">
        <li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
        <li><a href="http://www.wrox.com">Wrox site</a></li>
        <li><a href="http://www.yahoo.com">Yahoo!</a></li>
    </ul>
    <div id="view" style="background: rgb(9, 255, 0)">
        <h1>
            view
        </h1>
    </div>
    <div id="myDiv"></div>
    <div></div>
    <div></div>
    <div class="wrapper">

        <button id="my-btn">botton</button>
        <button id="my-btn2">botton2</button>
        <button id="my-btn3">botton 3</button>
    </div>
    <!-- 输出 "Click Me" -->
    <input type="button" value="Click Me" onclick="alert(this.value)">
    <form method="post">
        <input type="text" name="username" value="">
        <input type="button" value="Echo Username" onclick="alert(username.value)">
    </form>
    <script>
        var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            getEvent: function(event) {
                return event ? event : window.event;
            },
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };

        var handler = {
            message: "Event handled",
            handleClick: function(event) {
                console.log(this);
                console.log(this.message);
            }
        };
        var btn = document.getElementById("my-btn");
        EventUtil.addHandler(btn, "click", function(event) {
            // console.log(this);
            // console.log(event.target);
            handler.handleClick();
        });
        var btn2 = document.getElementById("my-btn2");
        EventUtil.addHandler(btn2, "click", handler.handleClick);







        function bind(fn, context) {
            var args = Array.prototype.slice.call(arguments, 2);
            return function() {
                var innerArgs = Array.prototype.slice.call(arguments);
                var finalArgs = args.concat(innerArgs);
                return fn.apply(context, finalArgs);
            };
        }

        var handler = {
            message: "Event handled",
            handleClick: function(name, event) {
                console.log(this.message + ":" + name + ":" + event.type);
            }
        };
        var btn = document.getElementById("my-btn3");
        EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn3"));



        var handler = {
            message: "Event handled",
            handleClick: function(name, event) {
                alert(this.message + ":" + name + ":" + event.type);
            }
        };
        var btn = document.getElementById("my-btn");
        EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler, "my-btn"));



        function chunk(array, process, context) {
            setTimeout(function() {
                var item = array.shift();
                process.call(context, item);
                if (array.length > 0) {
                    setTimeout(arguments.callee, 100);
                }
            }, 100);
        }
        var data = [12, 123, 1234, 453, 436, 23, 23, 5, 4123, 45, 346, 5634, 2234, 345, 342];

        function printValue(item) {
            var div = document.getElementById("myDiv");
            div.innerHTML += item + "<br>";
        }
        chunk(data, printValue);


        var processor = {
            timeoutId: null,
            //实际进行处理的方法
            performProcessing: function() {
                //实际执行的代码
            },
            //初始处理调用的方法
            process: function() {
                clearTimeout(this.timeoutId);
                var that = this;
                this.timeoutId = setTimeout(function() {
                    that.performProcessing();
                }, 100);
            }
        };
        //尝试开始执行
        processor.process();


        function throttle(method, context) {
            clearTimeout(method.tId222);
            // console.log(method.tId222);
            method.tId222 = setTimeout(function() {
                method.call(context);
            }, 100);
        }

        function resizeDiv() {
            var div = document.getElementById("myDiv");
            div.style.height = div.offsetWidth + "px";
            // console.log(div.offsetWidth + "px");
        }
        window.onresize = function() {
            throttle(resizeDiv);
        };






        function object(o) {
            function F() {}
            F.prototype = o;
            return new F();
        }

        function inheritPrototype(subType, superType) {
            var prototype = object(superType.prototype); //创建对象
            prototype.constructor = subType; //增强对象
            subType.prototype = prototype; //指定对象
        }

        function EventTarget() {
            this.handlers = {};
        }
        EventTarget.prototype = {
            constructor: EventTarget,
            addHandler: function(type, handler) {
                if (typeof this.handlers[type] == "undefined") {
                    this.handlers[type] = [];
                }
                this.handlers[type].push(handler);
            },
            fire: function(event) {
                if (!event.target) {
                    event.target = this;
                }
                if (this.handlers[event.type] instanceof Array) {
                    var handlers = this.handlers[event.type];
                    for (var i = 0, len = handlers.length; i < len; i++) {
                        handlers[i](event);
                    }
                }
            },
            removeHandler: function(type, handler) {
                if (this.handlers[type] instanceof Array) {
                    var handlers = this.handlers[type];
                    for (var i = 0, len = handlers.length; i < len; i++) {
                        if (handlers[i] === handler) {
                            break;
                        }
                    }
                    handlers.splice(i, 1);
                }
            }
        };

        function handleMsg(event) {
            console.log("Message received: " + event.message);
        }
        //创建一个新对象
        var target = new EventTarget();
        //添加一个事件处理程序
        target.addHandler("message", handleMsg);
        //触发事件
        target.fire({ type: "message", message: "Hello world 1!" });
        //删除事件处理程序
        target.removeHandler("message", handleMsg);
        //再次，应没有处理程序
        target.fire({ type: "message", message: "Hello world 2!" });

        function Person(name, age) {
            EventTarget.call(this);
            this.name = name;
            this.age = age;
        }
        inheritPrototype(Person, EventTarget);
        Person.prototype.say = function(message) {
            this.fire({ type: "message", message: message });
        };

        function handleMessage(event) {
            console.log(event.target.name + " says: " + event.message);
        }
        // 创建新person
        var person = new Person("Nicholas", 29);
        //添加一个事件处理程序
        person.addHandler("message", handleMessage);
        //在该对象上调用1 个方法，它触发消息事件
        person.say("Hi there.");


        EventUtil.addHandler(document, "mousemove", function(event) {
            var myDiv = document.getElementById("myDiv");
            myDiv.style.left = event.clientX + "px";
            myDiv.style.top = event.clientY + "px";
            // console.table(event.clientX + "px", event.clientY + "px");
        });







        var DragDrop = function() {
            var dragdrop = new EventTarget(),
                dragging = null,
                diffX = 0,
                diffY = 0;

            function handleEvent(event) {
                //获取事件和对象
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                //确定事件类型
                switch (event.type) {
                    case "mousedown":
                        if (target.className.indexOf("draggable") > -1) {
                            dragging = target;
                            diffX = event.clientX - target.offsetLeft;
                            diffY = event.clientY - target.offsetTop;
                            dragdrop.fire({
                                type: "dragstart",
                                target: dragging,
                                x: event.clientX,
                                y: event.clientY
                            });
                        }
                        break;
                    case "mousemove":
                        if (dragging !== null) {
                            //指定位置
                            dragging.style.left = (event.clientX - diffX) + "px";
                            dragging.style.top = (event.clientY - diffY) + "px";
                            //触发自定义事件
                            dragdrop.fire({
                                type: "drag",
                                target: dragging,
                                x: event.clientX,
                                y: event.clientY
                            });
                        }
                        break;
                    case "mouseup":
                        dragdrop.fire({
                            type: "dragend",
                            target: dragging,
                            x: event.clientX,
                            y: event.clientY
                        });
                        dragging = null;
                        break;
                }
            };
            //公共接口
            dragdrop.enable = function() {
                EventUtil.addHandler(document, "mousedown", handleEvent);
                EventUtil.addHandler(document, "mousemove", handleEvent);
                EventUtil.addHandler(document, "mouseup", handleEvent);
            };
            dragdrop.disable = function() {
                EventUtil.removeHandler(document, "mousedown", handleEvent);
                EventUtil.removeHandler(document, "mousemove", handleEvent);
                EventUtil.removeHandler(document, "mouseup", handleEvent);
            };
            return dragdrop;
        }();
        DragDrop.enable();
        DragDrop.addHandler("dragstart", function(event) {
            var status = document.getElementById("status");
            status.innerHTML = "Started dragging " + event.target.id;
        });
        DragDrop.addHandler("drag", function(event) {
            var status = document.getElementById("status");
            status.innerHTML += "<br/> Dragged " + event.target.id + " to (" + event.x +
                "," + event.y + ")";
        });
        DragDrop.addHandler("dragend", function(event) {
            var status = document.getElementById("status");
            status.innerHTML += "<br/> Dropped " + event.target.id + " at (" + event.x +
                "," + event.y + ")";
        });
    </script>
</body>

</html>